<template>
    <div>
        <div style="text-align: left;margin-bottom: 30px">
            <el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div style="position: relative;text-align: left">
            <el-button type="danger" @click="deleteOpen" style="margin-bottom: 20px">
                删除选中
            </el-button>
            <el-button  type="primary" style=" position:absolute;right:10px;pxmargin-bottom: 20px" @click="$router.push('/studentHome/topicSet')">
                新增
            </el-button>
        </div>


        <el-table
                ref="multipleTable"
                :data="questionList"
                v-model="questionList"
                tooltip-effect="dark"
                border
                style="width: 100%"

                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="questionType"
                    label="题目类型"
                    width="120">
                <template slot-scope="scope">
                    {{scope.row.questionType|type}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="questionTitle"
                    label="题目内容"
            >
                <template slot-scope="scope">
                    <div @click="updateQuestion(scope)">{{ scope.row.questionTitle }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180"
            >
                <template slot-scope="scope">
                    {{scope.row.createTime|date}}
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    import {DeleteQuestion, GetQuestions} from "../../request/api";

    export default {
        created() {

          this.getQuestionList();
        },
        data() {
            return {
                questionList: [{
                    type: '单选题',
                    title: '王小虎',
                    time: '时间'
                },{
                    type: '单选题',
                    title: '王小虎',
                    time: '时间'
                },{
                    type: '单选题',
                    title: '王小虎',
                    time: '时间'
                },{
                    type: '单选题',
                    title: '王小虎',
                    time: '时间'
                },{
                    type: '单选题',
                    title: '王小虎',
                    time: '时间'
                },{
                    type: '单选题',
                    title: '王小虎',
                    time: '时间'
                }],
                multipleSelection: [],
                deleteIds:[],
            }
        },

        methods: {
            deleteOpen() {
                console.log(this.deleteIds)
                this.$confirm('此操作将永久删除'+this.deleteIds, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    DeleteQuestion(this.deleteIds).then(resp=>{
                        console.log(resp)
                        if(resp.data.code==200){
                            this.getQuestionList();
                        }
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateQuestion(scope){
                this.$store.state.questionId=scope.row.id;
                this.$router.push("/studentHome/topicSet")
            },
            handleSelectionChange(selection) {
                this.deleteIds=[]

                // this.multipleSelection = val;
                for (let i=0;selection.length>i;i++){
                    this.deleteIds.push(selection[i].id)
                }

            },
            getQuestionList(){
                GetQuestions().then(resp=>{
                    console.log(resp)
                    if(resp.data.code==200){
                        let {questionList}=resp.data.data
                        this.questionList=questionList;
                    }
                })
            }
        }
    }
</script>